<template>
  <div>

    <!--  高级查询-->

    <el-col :span="4">  <el-input v-model="gaocha.caseNo" placeholder="案号" ></el-input></el-col>
    <el-col :span="4">
      <el-cascader Cascader clearable :options="options" placeholder="请选择收支类别"  v-model="gaocha.cwInoutTypeId" :show-all-levels="false" :props='{label:"cwName",value:"id",emitPath:false}'></el-cascader>
    </el-col>
    <el-col :span="3">
      <el-select v-model="gaocha.cwPayType" placeholder="请选择支付方式">
        <el-option label="请选择支付方式" value=""></el-option>
        <el-option v-for="(item,index) in zhifufangshi" :key="index" :label="item.zfname" :value="item.zfid"></el-option>
      </el-select>
    </el-col>
    <el-col :span="1.3">
      录入日期:<br>
      (区间)
    </el-col>
    <el-col :span="3">
      <el-date-picker type="date" v-model="gaocha.sta" placeholder="选择开始时间"
                      value-format="yyyy-MM-dd"  style="width: 100%;"></el-date-picker>


    </el-col>
    <el-col :span="3">
      <el-date-picker type="date" v-model="gaocha.ends" placeholder="选择结束时间"
                      value-format="yyyy-MM-dd"  style="width: 100%;"></el-date-picker>
    </el-col>



    <el-col :span="5">
      <el-button type="primary" plain @click="gaojijiansuo">检索</el-button>
    </el-col>
    <!--  高级查询结束-->




    <!--  渲染数据库里 cw_inout 表的字段数据-->
    <template>
      <el-table
          :summary-method="getSummaries"
          show-summary
          :data="tableData"
          border
          width="100%"


      >
        <el-table-column
            prop="cwName"
            label="收支类别"
            align="center"

        >
        </el-table-column>
        <el-table-column
            prop="cwInoutDate"
            label="发生日期"
            align="center"
        >
        </el-table-column>
        <el-table-column
            prop="cwInoutMoney"
            label="收支金额"
            align="center">
        </el-table-column>
        <el-table-column
            prop="zfname"
            label="支付方式"
            align="center">
        </el-table-column>
        <el-table-column
            prop="caseNo"
            label="案号"
            align="center">
        </el-table-column>
        <el-table-column
            prop="empName"
            label="收支人"
            align="center">
        </el-table-column>
        <el-table-column
            prop="cwPayer"
            label="付款人"
            align="center">
        </el-table-column>
        <el-table-column
            prop="cwEnteringdate"
            label="录入日期"
            align="center">
        </el-table-column>
        <el-table-column
            prop="cwRemark"
            label="备注"
            align="center">
        </el-table-column>

      </el-table>


    </template>
    <!--分页-->
    <!-- 分页组件 -->
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="gaocha.currentPage"
        :page-sizes="[5, 15, 20]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
    </el-pagination>

    <!--分页结束-->
  </div>
</template>

<script>
export default {
  name: "CwInout",
  data(){
    return{
      tableData: [], //存储所有数据
      total :0,       //
      gaocha:{
        currentPage:1, //初始页
        pageSize:5,    //    每页的数据
        userid :JSON.parse(localStorage["user"])[0].id,//用户id
        caseNo: "",  //案号
        cwInoutTypeId: "", //收支类别id
        cwPayType: "", //支付方式id
        sta : "", //开始时间
        ends : "" //结束时间

      },
      options:[]  ,      //递归数据  收支类别
      zhifufangshi:[] //支付方式
    }
  },
  methods:{
    //分页
    // 每页显示的几条数据
    handleSizeChange: function (size) {
      this.gaocha.pageSize = size;
      //   console.log(this.gaocha.pageSize)
      this.GetLogJob()
    },
    //当前页
    handleCurrentChange: function(currentPage){
      this.gaocha.currentPage = currentPage;
      // console.log(this.gaocha.currentPage)
      this.GetLogJob()
    },
    //查询 or 高级查询
    GetLogJob(){
      this.$http.get('/cwInout/quansuo',{params:this.gaocha})
          .then(res =>{
            //所有的数据
            this.tableData=res.data.data.list
            //数据总条数
            this.total=  res.data.data.total

          })

    },
    //收支类型的数据
    digui(){
      this.$http.get('/cwInoutType')
          .then(res =>{this.options=res.data.data
            //  console.log(this.options)
          })
    },
    //支付方式
    cwZffs(){
      this.$http.get('/cwZffs')
          .then(res =>{this.zhifufangshi=res.data.data
            //    console.log(this.zhifufangshi)
          })
    },
    //高级查询
    gaojijiansuo(){
      this.GetLogJob();
    }
    ,
    //合计
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '总价';
          return;
        }
        const values = data.map(item => Number(item[column.property]));
        if (!values.every(value => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
          if(  sums[index]==0){return   sums[index]=""; }

          sums[index] += ' 元';
        } else {
          return;
        }

      });
      return sums;
    }
  }
  ,created() {
    this.GetLogJob();//查询
    this.digui();//递归 收支类别
    this.cwZffs();// 支付方式
  }
}
</script>

<style scoped>

</style>